import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import { Form, Input } from 'antd-mobile'
function App() {
  let nav=useNavigate()
  const SS=()=>{
   alert('姓名：张小三')
  }
  return (
    <div className='box' style={{backgroundColor:'#f2f2f2',width:'100%',height:'100%'}}>
      <NavBar onBack={nav('')} style={{backgroundColor:'skyblue',color:'white'}}>新增乘客</NavBar>
      <Button block color='primary' size='large' 
      style={{backgroundColor:'#fff',color:'skyblue',border:'none',borderRadius:'20px',margin:'5px'}}
      onClick={()=>SS()}>
         扫描证件添加
        </Button>
        <div style={{backgroundColor:'#fff',margin:'5px'}}>
        <Form.Item label='乘客类型' name='username'>
            <Input placeholder='请选择乘客类型' clearable />
          </Form.Item>
          <Form.Item label='姓名' name='username'>
            <Input placeholder='请输入姓名' clearable />
          </Form.Item>
          <Form.Item label='证件类型' name='username'>
            <Input placeholder='请选择证件类型' clearable />
          </Form.Item>
          <Form.Item label='证件号码' name='username'>
            <Input placeholder='请输入证件号码' clearable />
          </Form.Item>
          <Form.Item label='手机号码' name='username'>
            <Input placeholder='请输入手机号码' clearable />
          </Form.Item>
          <span style={{color:'gray'}}>
            为配合疫情工作防控工作，需提供每名乘客的 <span style={{color:'red'}}>本人手机号</span>，
            老人或无手机的乘客，可填写亲友手机号
          </span>
        </div>
        <Button block color='primary' size='large' 
        style={{backgroundColor:'skyblue',border:'none',borderRadius:'20px',margin:'5px'}}
        >
          提交
        </Button>
    </div>
  )
}

export default App
